<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>购物车页面</title>

		<link href="../../js/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="../../js/basic/css/demo.css" rel="stylesheet" type="text/css" />
		<link href="../../css/cartstyle.css" rel="stylesheet" type="text/css" />
		<link href="../../css/optstyle.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="../../js/jquery.js"></script>
		<script type="text/javascript" src="../../js/vue/vue.min.js"></script>

	</head>

	<body>

		<!--顶部导航条 -->
		<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<div class="menu-hd">
						<a href="#" target="_top" class="h">亲，请登录</a>
						<a href="#" target="_top">免费注册</a>
					</div>
				</div>
			</ul>
			<ul class="message-r">
				<div class="topMessage home">
					<div class="menu-hd"><a href="/html/home/home.html" target="_top" class="h">商城首页</a></div>
				</div>
				<div class="topMessage my-shangcheng">
					<div class="menu-hd MyShangcheng"><a href="/html/person/index.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
				</div>
				<div class="topMessage mini-cart">
					<div class="menu-hd"><a id="mc-menu-hd" href="/html/home/shopcart.html" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
				</div>
				<div class="topMessage favorite">
				<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
			</ul>
			</div>

			<!--悬浮搜索框-->

			<div class="nav white">
				<div class="logo"><img src="../../images/logo.png" /></div>
				<div class="logoBig">
					<li><img src="../../images/logobig.png" /></li>
				</div>

				<div class="search-bar pr">
					<a name="index_none_header_sysc" href="#"></a>
					<form>
						<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
						<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
					</form>
				</div>
			</div>

			<div class="clear"></div>

			<!--购物车 -->
			<div class="concent" id="shopcart">
				<div id="cartTable">
					<div class="cart-table-th">
						<div class="wp">
							<div class="th th-chk">
								<div id="J_SelectAll1" class="select-all J_SelectAll">

								</div>
							</div>
							<div class="th th-item">
								<div class="td-inner">商品信息</div>
							</div>
							<div class="th th-price">
								<div class="td-inner">单价</div>
							</div>
							<div class="th th-amount">
								<div class="td-inner">数量</div>
							</div>
							<div class="th th-sum">
								<div class="td-inner">金额</div>
							</div>
							<div class="th th-op">
								<div class="td-inner">操作</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>

					<tr class="item-list">
						<div class="bundle  bundle-last ">
							<div class="bundle-hd">
								<div class="bd-promos">
									<div class="bd-has-promo"><span class="bd-has-promo-content"></span>&nbsp;&nbsp;</div>
									<div class="act-promo">
										<a href="#" target="_blank"><span class="gt"></span></a>
									</div>
									<span class="list-change theme-login">编辑</span>
								</div>
							</div>
							<div class="bundle-main">
							<!-- ul开始 -->
								<ul class="item-content clearfix" v-for="item in result">
									<li class="td td-chk">
										<div class="cart-checkbox ">
											<input class="check" :id="item.goodsId+':'+item.tasteId+':'+item.pakageId" name="checkbox"  type="checkbox" onclick="check(this)" :value="item.total">
											<label for="J_CheckBox_170037950254"></label>
										</div>
									</li>
									<li class="td td-item">
										<div class="item-pic">
											<a href="#" target="_blank" data-title="美康粉黛醉美东方唇膏口红正品 持久保湿滋润防水不掉色护唇彩妆" class="J_MakePoint" data-point="tbcart.8.12">
												<img src="../../images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg"></a>
										</div>
										<div class="item-info">
											<div class="item-basic-info">
												<a href="#" target="_blank" title="美康粉黛醉美唇膏 持久保湿滋润防水不掉色" class="item-title J_MakePoint" data-point="tbcart.8.11">{{item.name}}</a>
											</div>
										</div>
									</li>
									<li class="td td-info">
										<div class="item-props item-props-can">
											<span class="sku-line" :id="item.goodsId+':'+item.tasteId+':'+item.pakageId" >口味：{{item.taste}}</span>
											<span class="sku-line" :name="item.goodsId+':'+item.tasteId+':'+item.pakageId" >包装：{{item.pakage}}</span>
											<span tabindex="0" class="btn-edit-sku theme-login">修改</span>
											<i class="theme-login am-icon-sort-desc"></i>
										</div>
									</li>
									<li class="td td-price">
										<div class="item-price price-promo-promo">
											<div class="price-content">
												<div class="price-line">
													<em class="price-original">{{item.prePrice}}</em>
												</div>
												<div class="price-line">
													<em class="J_Price price-now" tabindex="0">{{item.price}}</em>
												</div>
											</div>
										</div>
									</li>
									<li class="td td-amount">
										<div class="amount-wrapper ">
											<div class="item-amount ">
												<div class="sl">
													<input class="min am-btn" :id="item.goodsId+':'+item.tasteId+':'+item.pakageId" type="button"  value="-" onclick="dec(this)"  onblur="changeByButton(this)"/>
													<input class="text_box" :name="item.goodsId+':'+item.tasteId+':'+item.pakageId" type="text"   :value="item.count" style="width:30px;" onchange="changeCount(this)"/>
													<input class="add am-btn"  :id="item.goodsId+':'+item.tasteId+':'+item.pakageId" type="button"  value="+" onclick="add(this)" onblur="changeByButton(this)"/>
												</div>
											</div>
										</div>
									</li>
									<li class="td td-sum">
										<div class="td-inner">
											<em tabindex="0" class="J_ItemSum number" >{{item.total}}</em>
										</div>
									</li>
									<li class="td td-op">
										<div class="td-inner">
											<a title="移入收藏夹" class="btn-fav" href="#">移入收藏夹</a>
											<a href="javascript:;" data-point-url="#" :name="item.goodsId+':'+item.tasteId+':'+item.pakageId"  class="delete" onclick="del(this)">删除</a>
										</div>
									</li>
								</ul>
				<!-- ul结束 -->	
							</div>
						</div>
					</tr>
					<div class="clear"></div>
				<div class="float-bar-wrapper">
					<div id="J_SelectAll2" class="select-all J_SelectAll">
						<div class="cart-checkbox">
							<input class="check-all check" id="selectAll" name="select-all" value="true" type="checkbox" >
							<label for="selectAll"></label>
						</div>
						<span>全选</span>
					</div>
					<div class="operations">
						<a href="#" hidefocus="true" class="deleteAll"  onclick="delMutl()">删除</a>
						<a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
					</div>
					<div class="float-bar-right">
						<div class="amount-sum">
							<span class="txt">已选商品</span>
							<em id="J_SelectedItemsCount">0</em><span class="txt">件</span>
							<div class="arrow-box">
								<span class="selected-items-arrow"></span>
								<span class="arrow"></span>
							</div>
						</div>
						<div class="price-sum">
							<span class="txt">合计:</span>
							<strong class="price">¥<em id="J_Total">{{totalPay}}</em></strong>
						</div>
						<div class="btn-area">
							<a href="#" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算" onclick="goPay()">
								<span>结&nbsp;算</span></a>
						</div>
					</div>

				</div>

				<div class="footer">
					<div class="footer-hd">
						<p>
							<a href="#">恒望科技</a>
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
							<a href="#">关于恒望</a>
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>© 2015-2025 Hengwang.com 版权所有</em>
						</p>
					</div>
				</div>

			</div>

			<!--操作页面-->

			<div class="theme-popover-mask"></div>

			<div class="theme-popover">
				<div class="theme-span"></div>
				<div class="theme-poptit h-title">
					<a href="javascript:;" title="关闭" class="close">×</a>
				</div>
				<div class="theme-popbod dform">
					<form class="theme-signin" name="loginform" action="" method="post">

						<div class="theme-signin-left">

							<li class="theme-options">
								<div class="cart-title">颜色：</div>
								<ul>
									<li class="sku-line selected">12#川南玛瑙<i></i></li>
									<li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
								</ul>
							</li>
							<li class="theme-options">
								<div class="cart-title">包装：</div>
								<ul>
									<li class="sku-line selected">包装：裸装<i></i></li>
									<li class="sku-line">两支手袋装（送彩带）<i></i></li>
								</ul>
							</li>
							<div class="theme-options">
								<div class="cart-title number">数量</div>
								<dd>
									<input class="min am-btn am-btn-default" name="" type="button" value="-" />
									<input class="text_box" name="" type="text" value="1" style="width:30px;" />
									<input class="add am-btn am-btn-default" name="" type="button" value="+" />
									<span  class="tb-hidden">库存<span class="stock">1000</span>件</span>
								</dd>

							</div>
							<div class="clear"></div>
							<div class="btn-op">
								<div class="btn am-btn am-btn-warning">确认</div>
								<div class="btn close am-btn am-btn-warning">取消</div>
							</div>

						</div>
						<div class="theme-signin-right">
							<div class="img-info">
								<img src="../../images/kouhong.jpg_80x80.jpg" />
							</div>
							<div class="text-info">
								<span class="J_Price price-now">¥39.00</span>
								<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
							</div>
						</div>

					</form>
				</div>
			</div>
		<!--引导 -->
		<div class="navCir">
			<li><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
			<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
			<li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>	
			<li><a href="../person/index.html"><i class="am-icon-user"></i>我的</a></li>					
		</div>
		</div>
	</body>

<script type="text/javascript">
	var app = new Vue({
		el : '#shopcart',
		data : {
			result : [],
			totalPay : 0,
		}
	});

	var flag = 0; //存标志位置
	var total = 0; //存总量
	//查询用户数据
	var getShopcart = function() {
		$.ajax({
			type : "post",
			dataType : "json",
			url : "/cart/show",
			success : function(msg) {
				app.result = msg.items; //把list对象赋给app的rusult属性
				total = msg.totalPay;
			}
		});
	};

	getShopcart();

	//复选框勾选的jqury函数
	var check = function(num) { //item_id必须可以为数字,也可以为字符串
		var b = $(num).attr('checked');
		var num = $(num).val();
		num = toDecimal(num);
		if (b == 'checked') {
			app.totalPay += num;
			app.totalPay = toDecimal(app.totalPay);
			console.log(app.totalPay );
		} else {
			app.totalPay -= num;
			app.totalPay = toDecimal(app.totalPay);
		}
	};
	//转化为小数后两位
	 function toDecimal(xx) {   
	      var f = parseFloat(xx);   
	      if (isNaN(f)) {   
	        return;   
	      }   
	      f = Math.round(xx*100)/100;   
	      return f;   
	    }   
	//全选跟全不选
	$('#selectAll').click(function() {
		//console.log(index);
		if (flag % 2 == 0) {
			$('input:checkbox').each(function() {
				$(this).attr('checked', true);
			});
			app.totalPay = total;
		} else {
			$('input:checkbox').each(function() {
				$(this).attr('checked', false);
			});
			app.totalPay = 0;
		}
		flag++; //控制是否全选
	});

	// 增加数量
	var add = function(add) {
		var t = $(add).parent().find('input[class*=text_box]');
		t.val(parseInt(t.val()) + 1);
	}
	//减少数量
	var dec = function(dec) {
		var t = $(dec).parent().find('input[class*=text_box]');
		t.val(parseInt(t.val()) - 1);
		if (parseInt(t.val()) < 0) {
			t.val(0);
		}
	}
	//直接修改数量
	var changeCount = function(num) {
		var count = $(num).val(); //取得商品修改的数量
		var goodsIds = $(num).attr("name"); //商品的id
		var goodsId = goodsIds.split(":")[0];
		var tasteId = goodsIds.split(":")[1];
		var pakageId =goodsIds.split(":")[2];
		if (confirm("是否确认修改")) {
			$.ajax({
				type : "post",
				dataType : "json",
				url : "/cart/update",
				data : {
					pageIndex : 1,
					pageSize : 5,
					count : count,
					goodsId : goodsId,
					tasteId : tasteId,
					pakageId : pakageId,
				//向服务端传的参数，此处只是演示
				},
				success : function(msg) {
					app.result = msg.items; //把list对象赋给app的rusult属性
					total = msg.totalPay;
				}
			});
		} else {
			getShopcart();
		}
	}

	//通过按钮来实现联动变化
	var changeByButton = function(num) {
		var goodsIds=$(num).attr("id");  
		var count=$(".sl input[name='"+goodsIds+"']").val();  //通过选择器选到文本框的值
		var goodsId = goodsIds.split(":")[0];   //商品的id
		var tasteId = goodsIds.split(":")[1];   //商品口味id
		var pakageId =goodsIds.split(":")[2];  //商品包装id
		console.log("tasteId:"+tasteId);
		console.log("pakageId:"+pakageId);
		console.log("goodsId:"+goodsId);
		if (confirm("是否确认修改")) {
			$.ajax({
				type : "post",
				dataType : "json",
				url : "/cart/update",
				data : {
					pageIndex : 1,
					pageSize : 5,
					count : count,
					goodsId : goodsId,
					tasteId : tasteId,
					pakageId : pakageId,
				//向服务端传的参数，此处只是演示
				},
				success : function(msg) {
					app.result = msg.items; //把list对象赋给app的rusult属性
					total = msg.totalPay;
				}
			});
		} else {
			getShopcart();
		}
	}

	//删除商品项
	var del = function(num) {
		var goodsIds = $(num).attr("name"); //商品的id
		var goodsId = goodsIds.split(":")[0];   //商品的id
		var tasteId = goodsIds.split(":")[1];   //商品口味id
		var pakageId =goodsIds.split(":")[2];  //商品包装id
		console.log("tasteId:"+tasteId);
		console.log("pakageId:"+pakageId);
		console.log("goodsId:"+goodsId);
		if (confirm("是否确认删除")) {
			$.ajax({
				type : "post",
				dataType : "json",
				url : "/cart/del",
				data : {
					pageIndex : 1,
					pageSize : 5,
					goodsId : goodsId,
					tasteId : tasteId,
					pakageId : pakageId,
				//向服务端传的参数
				},
				success : function(msg) {
					app.result = msg.items; //把list对象赋给app的rusult属性
					app.totalPay = 0;
				}
			});
		}
	}
	//选中的商品,进入支付页面
	function  goPay(){
		var check = $(".bundle-main input[name='checkbox']");
		var result = '';
		for(var i=0;i<check.length;i++){
			var b =$(check[i]).attr('checked');
			if(b == 'checked'){
				result += $(check[i]).attr('id');
				result += '-';
			}
		}
		console.log(result);
		if(result == ""){
			alert("你还没有选中购物车中的商品,请选择");
			return;
		}
		$.ajax({
			type : "post",
			dataType : "json",
			url : "/cart/updateFlag",
			data : {
				flags : result,
			//向服务端传的参数
			},
			success : function(msg) {
				app.result = msg.items; //把list对象赋给app的rusult属性
				total = msg.totalPay;
			}
		});
		location.href = "pay.html";
	}
	
	//删除多项
	function  delMutl(){
		var check = $(".bundle-main input[name='checkbox']");
		var result = '';
		for(var i=0;i<check.length;i++){
			var b =$(check[i]).attr('checked');
			if(b == 'checked'){
				result += $(check[i]).attr('id');
				result += '-';
			}
		}
		console.log(result);
		if(result == ""){
			alert("你还没有选中要删除的商品项,请选择");
			return;
		}
		if (confirm("是否确认删除")) {
			$('input:checkbox').each(function() { //选中多条删除之后,全部复选框都去掉
				$(this).attr('checked', false);
			});
			$.ajax({
				type : "post",
				dataType : "json",
				url : "/cart/delMult",
				data : {
					flags : result,
				//向服务端传的参数
				},
				success : function(msg) {
					app.result = msg.items; //把list对象赋给app的rusult属性
					app.totalPay = 0;
				}
			});
		}
	}
</script>
</html>